<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <link rel="stylesheet" href="../../packages/core/css/framework7.min.css">
    <link rel="stylesheet" href="../../css/framework7-icons.css">
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://unpkg.com/react@16.4.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.4.1/umd/react-dom.production.min.js"></script>
    <script src="../../packages/react/framework7-react.min.js"></script>
    <script src="../../packages/core/js/framework7.min.js"></script>
    <script type="text/babel">
      class AppComponent extends React.Component {
        constructor() {
          super();
      
          this.state = {
      
          };
        }
        render() {
          return (
            <App>
              <View main>
                <Page>
                  <Navbar title="Cards" />
                  <BlockTitle>Simple Cards</BlockTitle>
                  <Card
                    content="This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element."
                  ></Card>
                  <Card
                    title="Card header"
                    content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
                    footer="Card footer"
                  ></Card>
                  <Card
                    content="Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. "
                  ></Card>
      
                  <BlockTitle>Outline Cards</BlockTitle>
                  <Card
                    outline
                    content="This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element."
                  ></Card>
                  <Card
                    outline
                    title="Card header"
                    content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
                    footer="Card footer"
                  ></Card>
                  <Card
                    outline
                    content="Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. "
                  ></Card>
      
                  <BlockTitle>Styled Cards</BlockTitle>
                  <Card className="demo-card-header-pic">
                    <CardHeader
                      className="no-border"
                      valign="bottom"
                      style={{ backgroundImage: 'url(http://lorempixel.com/1000/600/nature/3/)' }}
                    >Journey To Mountains</CardHeader>
                    <CardContent>
                      <p className="date">Posted on January 21, 2015</p>
                      <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit...</p>
                    </CardContent>
                    <CardFooter>
                      <Link>Like</Link>
                      <Link>Read more</Link>
                    </CardFooter>
                  </Card>
                  <Card className="demo-card-header-pic">
                    <CardHeader
                      className="no-border"
                      valign="bottom"
                      style={{ backgroundImage: 'url(http://lorempixel.com/1000/600/people/6/)' }}
                    >Journey To Mountains</CardHeader>
                    <CardContent>
                      <p className="date">Posted on January 21, 2015</p>
                      <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit...</p>
                    </CardContent>
                    <CardFooter>
                      <Link>Like</Link>
                      <Link>Read more</Link>
                    </CardFooter>
                  </Card>
      
                  <BlockTitle>Facebook Cards</BlockTitle>
                  <Card className="demo-facebook-card">
                    <CardHeader className="no-border">
                      <div className="demo-facebook-avatar"><img src="http://lorempixel.com/68/68/people/1/" width="34" height="34"/></div>
                      <div className="demo-facebook-name">John Doe</div>
                      <div className="demo-facebook-date">Monday at 3:47 PM</div>
                    </CardHeader>
                    <CardContent padding={false}>
                      <img src="http://lorempixel.com/1000/700/nature/8/" width="100%"/>
                    </CardContent>
                    <CardFooter className="no-border">
                      <Link>Like</Link>
                      <Link>Comment</Link>
                      <Link>Share</Link>
                    </CardFooter>
                  </Card>
                  <Card className="demo-facebook-card">
                    <CardHeader className="no-border">
                      <div className="demo-facebook-avatar"><img src="http://lorempixel.com/68/68/people/1/" width="34" height="34"/></div>
                      <div className="demo-facebook-name">John Doe</div>
                      <div className="demo-facebook-date">Monday at 2:15 PM</div>
                    </CardHeader>
                    <CardContent>
                      <p>What a nice photo i took yesterday!</p><img src="http://lorempixel.com/1000/700/nature/8/" width="100%"/>
                      <p className="likes">Likes: 112    Comments: 43</p>
                    </CardContent>
                    <CardFooter className="no-border">
                      <Link>Like</Link>
                      <Link>Comment</Link>
                      <Link>Share</Link>
                    </CardFooter>
                  </Card>
      
                  <BlockTitle>Cards With List View</BlockTitle>
                  <Card>
                    <CardContent padding={false}>
                      <List>
                        <ListItem link="#">Link 1</ListItem>
                        <ListItem link="#">Link 2</ListItem>
                        <ListItem link="#">Link 3</ListItem>
                        <ListItem link="#">Link 4</ListItem>
                        <ListItem link="#">Link 5</ListItem>
                      </List>
                    </CardContent>
                  </Card>
                  <Card title="New Reelases">
                    <CardContent padding={false}>
                      <List medial-list>
                        <ListItem
                          title="Yellow Submarine"
                          subtitle="Beatles"
                        >
                          <img slot="media" src="http://lorempixel.com/88/88/fashion/4" width="44"/>
                        </ListItem>
                        <ListItem
                          title="Don't Stop Me Now"
                          subtitle="Queen"
                        >
                          <img slot="media" src="http://lorempixel.com/88/88/fashion/5" width="44"/>
                        </ListItem>
                        <ListItem
                          title="Billie Jean"
                          subtitle="Michael Jackson"
                        >
                          <img slot="media" src="http://lorempixel.com/88/88/fashion/6" width="44"/>
                        </ListItem>
                      </List>
                    </CardContent>
                    <CardFooter>
                      <span>January 20, 2015</span>
                      <span>5 comments</span>
                    </CardFooter>
                  </Card>
                </Page>
              </View>
            </App>
          )
        }
      }
    </script>
    <style>
      .demo-card-header-pic .card-header {
        height: 40vw;
        background-size: cover;
        background-position: center;
        color: #fff;
      }
      .demo-card-header-pic .card-content-padding .date{
        color: #8e8e93;
      }
      .demo-facebook-card .card-header {
        display: block;
        padding: 10px;
      }
      .demo-facebook-card .demo-facebook-avatar {
        float: left;
      }
      .demo-facebook-card .demo-facebook-name {
        margin-left: 44px;
        font-size: 14px;
        font-weight: 500;
      }
      .demo-facebook-card .demo-facebook-date {
        margin-left: 44px;
        font-size: 13px;
        color: #8e8e93;
      }
      .demo-facebook-card .card-footer {
        background: #fafafa;
      }
      .theme-dark .demo-facebook-card .card-footer {
        background-color: transparent;
      }
      .demo-facebook-card .card-footer a {
        color: #81848b;
        font-weight: 500;
      }
      .demo-facebook-card .card-content img {
        display: block;
      }
      .demo-facebook-card .card-content-padding {
        padding: 15px 10px;
      }
      .demo-facebook-card .card-content-padding .likes {
        color: #8e8e93;
      }
    </style>
    <script>
      var theme = 'ios';
      if (location.href.indexOf('theme=md') >= 0) theme = 'md';
      
      if (Framework7.use) Framework7.use(Framework7React, { theme: theme });
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(Framework7React, { theme: theme });
      
      var plugin = {
        params: {
          theme: theme,
        }
      };
      
      if (Framework7.use) Framework7.use(plugin);
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);
      
      window.onload = function () {
        if (typeof AppComponent !== 'undefined') {
          ReactDOM.render(
            React.createElement(AppComponent),
            document.getElementById('app')
          );
        }
      }
    </script>
  </body>
</html>